<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>jQuery UI Tabs - Default functionality</title>
        <link rel="stylesheet" href="themes/ui-lightness/jquery.ui.all.css">
        <link type="text/css" href="apycommenus/menu.css" rel="stylesheet" />
        <link rel="stylesheet" href="bannerrotator/bannerrotator.css">
        <link rel="stylesheet" href="jquerydatatable/jquery.dataTables.css">
        <link rel="stylesheet" href="mycss/common.css">
        <script src="jquery-1.7.1.js"></script>
        <script src="ui/jquery.ui.core.js"></script>
        <script src="ui/jquery.ui.widget.js"></script>
        <script src="ui/jquery.ui.tabs.js"></script>
        <script src="ui/jquery.ui.mouse.js"></script>
        <script src="ui/jquery.ui.sortable.js"></script>
        <script type="text/javascript" src="apycommenus/menu.js"></script>
        <script type="text/javascript" src="bannerrotator/bannerrotator.js"></script>
        <script type="text/javascript" src="jquerydatatable/jquery.dataTables.js"></script>
        <script>
            $(function() {
                $( "#sortable" ).sortable({
                    placeholder: "ui-state-highlight"
                });
                $( "#sortable" ).disableSelection();
            });
        </script>

        <script>
            $(function() {
                $( "#tabs" ).tabs();
            });
        </script>
        <script>
        $(document).ready(function(){
            $("body div:last").remove();
        });
        </script>
        <script type="text/javascript">
		function login(){
			var user = "admin";
			var pass = "admin123";
			if(document.frm.username.value == ""||document.frm.password.value == ""){
				alert("The username and password cannot be blank!");
				return false;
			}
			if(document.frm.username.value == user && document.frm.password.value != pass){
			alert("Password is incorrect! Try again!");
			document.frm.password.value="";
			return false;
			}
			if(document.frm.username.value !=user){
				alert("The username isn't existed!");
				document.frm.username.value="";
				document.frm.password.value="";
				return false;
			}
		};
		</script>
    </head>
    <body>
            <div id="content">
                <div style="width: 40%; margin: 25% 30%;">
                    <div id="maincontentheader">
                        Welcome!
                    </div>
                    <div id="tabs">
                        <div class="ui-tabs-panel">
                        <form name = frm action="home.html" onsubmit = "return login()" method = "post">
                        <table align="center">
                        	<tr>
                        		<td><b>Username: </b></td> 
                        		<td><input type = "text" name = "username" size = "30"/></td>
                        	</tr>
                        	<tr>
                        		<td><b>Password: </b></td> 
                        		<td><input type = "password"  name = "password" size = "30"/></td>
                        	</tr>
                        	<tr align = "center">
                        		<td></td>
                        		<td align="left">
                        			<input type="submit" value="Login" />			
                        		</td>
                        	</tr>
                 			<tr align = "center">
                        		<td></td>
                        		<td align="left">
                        			<a href = "recoverpassword.html">Forgot password</a>
                        		</td>
                        	</tr>
                        </table>
                        </form>
                        </div>
                    </div>
                </div>
            </div>       
        </div>
    </body>
</html>

